<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>gun.sprite.Basic 01</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<script type="text/javascript" src="../mootools-1.2-core.js"></script>
	<script type="text/javascript" src="../gun.sprite.js"></script>
	<script type="text/javascript">
	var spriter;
	var movies = $H({'front':[1,1], 'left':[2,1], 'right':[3,1], 'back':[4,1]});

	window.addEvent('domready', function() {
		spriter = new gun.sprite.Basic('el', {frameSize:[32,48], movies: movies, initMovie: 'front',  framesPerMovie:4 });

		spriter.addEvent('ENTER_FRAME', function(movie, frame) {
			clearButtons();
			$('btnf' + frame).setStyle('background-color', 'yellow');
			$('btnm_' + movie).setStyle('background-color', 'yellow');
		});

		$('image').addEvent('click', function(e) {
			var movie = movies.getKeys()[ ((e.client.y - e.target.getPosition().y) / 48).toInt() ];
			var frame = ((e.client.x - e.target.getPosition().x) / 32).toInt() + 1;
			spriter.setMovie(movie);
			spriter.goto(frame);
		});
	});
	function clearButtons() {
		for (var i = 1; i <=4 ; i++) $('btnf' + i).setStyle('background-color', '');
		movies.getKeys().each(function(m){ $('btnm_' + m).setStyle('background-color', '');});
	}
	</script>
	<style type="text/css">
	#el {background: url('images/grace1xx6.jpg'); border:1px solid #ccc;}
	#image {background: url('images/grace1xx6.jpg'); border:1px solid #ccc; width:128px; height:192px;}
	button {cursor:pointer;}
	</style>
</head>
<body>
	<div id="el"></div>

	<hr/>
	* click button for test<br />
	Movies : <button id="btnm_front" onclick="spriter.setMovie('front', true);">front movie</button>
	<button id="btnm_left" onclick="spriter.setMovie('left', true);">left movie</button>
	<button id="btnm_right" onclick="spriter.setMovie('right', true);">right movie</button>
	<button id="btnm_back" onclick="spriter.setMovie('back', true);">back movie</button><br />
	Frames : <button id="btnf1" onclick="spriter.goto(1);">1 frame</button>
	<button id="btnf2" onclick="spriter.goto(2);">2 frame</button>
	<button id="btnf3" onclick="spriter.goto(3);">3 frame</button>
	<button id="btnf4" onclick="spriter.goto(4);">4 frame</button><br />

	<hr/>
	* click each frame
	<div id="image"></div>
</body>
</html>